<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" width="840px" title="编辑快捷方式">
    <div v-if="menuData.length > 0">
      <el-checkbox-group v-model="checkedCities" :max="11">
        <el-checkbox class="width170" v-for="menu in menuData" :key="menu.id" :label="menu.id">
          {{ menu.title }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div v-else>
      <img style="display: block; margin: 20px auto" src="@/assets/images/empty.png" alt="" />
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button v-show="!dialogProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="ShortcutMenuDialog">
import { ref } from "vue";
import { ElMessage } from "element-plus";
// import { Member } from "@/api/interface";

interface DialogProps {
  isView: boolean;
  list: any[];
  api?: (params: any) => Promise<any>;
  getApi?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const dialogVisible = ref(false);
const dialogProps = ref<DialogProps>({
  isView: false,
  row: {}
});
const menuData = ref([]);
const checkedCities = ref([]);
// 接收父组件传过来的参数
const acceptParams = async (params: DialogProps) => {
  dialogProps.value = params;
  dialogVisible.value = true;
  if (dialogProps.value.list.length > 0) {
    checkedCities.value = dialogProps.value.list.map(im => im.id);
  }
  console.log(dialogProps.value.list);
  dialogProps.value.getApi!().then(res => {
    menuData.value = res.data;
  });
};

// 提交数据（新增/编辑）
const handleSubmit = async () => {
  // ruleFormRef.value!.validate(async valid => {
  //   if (!valid) return;
  try {
    await dialogProps.value.api!({ pageIdsObject: checkedCities.value });
    ElMessage.success({ message: `编辑常用功能成功！` });
    dialogProps.value.getTableList!();
    dialogVisible.value = false;
  } catch (error) {
    console.log(error);
  }
  // });
};

defineExpose({
  acceptParams
});
</script>
